import "./index.css";

export default function TodoFooter(props) {
  const handleChange = (e) => {
    props.checkAllTodo(e.target.checked);
  };

  const handleClick = () => {
    if (window.confirm("您确认要删除选中的内容吗?")) {
      props.batchDelTodo();
    }
  };

  return (
    <div className="todo-footer">
      <label>
        {/* 完成单选的选择，影响全选功能 */}
        <input
          type="checkbox"
          checked={props.total && props.completedNum === props.total}
          onChange={handleChange}
        />
      </label>
      <span>
        <span>已完成 {props.completedNum}</span> / 全部 {props.total}
      </span>
      {!!props.completedNum && (
        <button className="btn btn-danger" onClick={handleClick}>
          清除已完成任务
        </button>
      )}
    </div>
  );
}
